<template>
  <el-container class="h-full">
    <el-aside class="w-96 border-0 border-r border-solid border-gray-300">
      <SearchForm />
    </el-aside>
    <el-aside class="w-80 border-0 border-r border-solid border-gray-300 flex flex-col">
      <el-header class="bg-gray-200 flex justify-between items-center">
        <el-text size="large" type="info">客户列表</el-text>
      </el-header>
      <el-main class="p-0 h-0">
        <CustomerList />
      </el-main>
    </el-aside>

    <el-container>
      <el-header class="bg-gray-200 flex justify-between items-center">
        <el-input class="w-80" size="large" placeholder="输入聊天内容">
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
        <el-text type="primary" class="cursor-pointer">
          客户详情
          <el-icon><ArrowRightBold /></el-icon>
        </el-text>
      </el-header>
      <el-main class="p-0 h-0">
        <MessageList :list-data="mockMessageListData" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import SearchForm from '@/manager/components/SearchForm.vue'
import MessageList from '@/common/components/ChatMessageList.vue'
import { Search, ArrowRightBold } from '@element-plus/icons-vue'
import CustomerList from '@/manager/components/CustomerList.vue'
import { mockMessageListData } from '@/common/constants'
</script>

<style scoped></style>
